// $(function() {
//     var btnNext = $(".btn-next");
//     var btnPre = $(".btn-pre");
//     var index = 0;
//     var jStep = $(".step");

//     btnNext.on("click", function(e) {
//         index++;
//         if (index > 3) {
//             index = 3;
//         } else {
//             jStep.eq(index).addClass("active");
//             console.log(index);
//         }
//     })
//     btnPre.on("click", function(e) {
//         if (index < 1) {
//             index = 1;
//         } else {
//             console.log(index);
//             jStep.eq(index).removeClass("active");
//             index--;
//         }
//     })

// })


//  <!--<div class="step-graph clearfix">
//         <div class="step active"><span>1</span></div>
//         <div class="step"><span>2</span></div>
//         <div class="step"><span>3</span></div>
//         <div class="step"><span>4</span></div>
//     </div>-->
//插件
!(function($) {
    var stepGraph = function(element, options) {
        var data = options.data;
        var jStepGraph = $(this);
        this.el = element;
        this.size = data.length;
        this.index = 0;
        this.el.addClass("step-graph");
        this.el.addClass("clearfix");
        for (var i = 0; i < data.length; i++) {
            var htmlString = '<div class="step"><span>' + data[i].content + '</span></div>';
            var jStep = $(htmlString);
            // console.log(data[i]);
            this.el.append(jStep);
        }
    };
    stepGraph.prototype.next = function() {
        if (this.index < this.size) {
            this.el.find(".step").eq(this.index).addClass("active");
            this.index++;
        }
    };
    stepGraph.prototype.pri = function() {
        if (this.index > 0) {
            this.index--;
            this.el.find(".step").eq(this.index).removeClass("active");
        }
    };

    var plugin = function(option) {
        return this.each(function() {
            var jThis = $(this);
            console.log(data);
            console.log(this);
            var data = jThis.data("step-graph");
            if (!data) {
                jThis.data("step-graph", new stepGraph(jThis, option));
            }
            if (typeof option == "string") {
                data[option].call(data);
            }
        });
    };
    $.fn.stepGraph = plugin;
})(window.$, window);
$(function() {
    // $("#step-graph") 生成jquery对象 
    //new jquery（）__proto__prototype
    var stepGraph = $("#step-graph").stepGraph({
        data: [{
            content: 1
        }, {
            content: 2
        }, {
            content: 3
        }, {
            content: 4
        }]
    })
    var btnNext = $(".btn-next");
    var btnPri = $(".btn-pre");
    var index = 0;
    var jStep = $(".step");
    btnNext.on("click", function(e) {
        // stepGraph.next();
        stepGraph.stepGraph("next");
    })
    btnPri.on("click", function(e) {
        // stepGraph.pri();
        stepGraph.stepGraph("pri");
    })
})